//后台配置/数据配置

import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Divider, Spin, Collapse,message} from 'antd';
import style from './VideoDay.less';
//引入字体图标组件
import { DragDropContext } from 'react-dnd';
import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
import MyIcon from "../../components/common/MyIcon";
import {bgConQuery} from '../../services/redmoe';
import request from '../../utils/request';
import PublicService from '../../services/PublicService';
import styles from './VideoDay.less';
import moment from 'moment'
import Filtrate from '../../components/Filtrate';
import Dustbin from './component/Dustbin';
import Box from './component/Box';
const Panel = Collapse.Panel;
class VideoDay extends Component {
    state = {
        width:'100%',
        num:12,
        height: '35.5vh',
        video:'32.5vh',
        color:'#666',//文字颜色
        color1:'#3C97FF',//文字颜色
        color2:'#666',//文字颜色
        dustbins1: [
          { accepts: ['true'],open:false,controls:true},//type:GLASS,FOODP,APER
          { accepts: ['true'],open:false,controls:true},
          { accepts: ['true'],open:false,controls:true},
          { accepts: ['true'],open:false,controls:true},
          { accepts: ['true'],open:false,controls:true},
          { accepts: ['true'],open:false,controls:true},
          { accepts: ['true'],open:false,controls:true},
          { accepts: ['true'],open:false,controls:true},
          { accepts: ['true'],open:false,controls:true},
        ],
        dustbins:[
          { accepts: ['true'],open:false,controls:true,padding:'0 0.5vw 0 1vw',marginTop:'1vh'},
          { accepts: ['true'],open:false,controls:true,padding:'0 1vw 0 0.5vw',marginTop:'1vh'},
          { accepts: ['true'],open:false,controls:true,padding:'0 0.5vw 0 1vw',marginTop:'1.5vh'},
          { accepts: ['true'],open:false,controls:true,padding:'0 1vw 0 0.5vw',marginTop:'1.5vh'},
        ],
       videoList:true,
        boxes: [
          {
            title:'项目部',
            sub:[
              { name:'点位一', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'1' },
              { name:'点位二', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'2' },
              { name:'点位三', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'3' },
              { name:'点位四', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'4' },
              { name:'点位五', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'5' },
              { name:'点位六', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'6' }
            ],
          },
          {
            title:'项目现场',
            sub:[
              { name:'点位一', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'6' },
              { name:'点位二', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'7' },
              { name:'点位三', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'8' },
              { name:'点位四', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'9' },
              { name:'点位五', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'10' },
              { name:'点位六', type:'true', url:'rtmp://live.hkstv.hk.lxdns.com/live/hks',cameraCode:'11' }
            ],
          }
          
        ],
        droppedBoxNames: [],
        loading: false,
        options:[],
        request:null,
      };
      componentDidMount(){
        let t= this;
        t.setState({
          loading: true,
        });
        t.onclick(1);
        let projectCompanyId =t.getQueryString('projectCompanyId');
        console.log("projectCompanyId:",projectCompanyId)
        request({
          url:'/jnhj/company/getAllCompanyName',
          method:'GET'
        }).then(data => {
          if (data.rc === 0){
            let options = [];
            data.ret.map(item => {
              options.push({text:item.name,value:item.id})
            });
            t.setState({
              options,
              projectCompanyId
            });
            t.onSearch(projectCompanyId);
            t.timer();
          }else {
            message.error(data.err)
          }
        })
      }
      timer(){
        let t = this;
        t.state.request = setInterval(() => {
          let projectCompanyId =t.getQueryString('projectCompanyId');
          if (projectCompanyId !== t.state.projectCompanyId){
            t.onSearch(projectCompanyId);
            t.setState({
              projectCompanyId,
            })
          }
        },1000)
      }
      componentWillUnmount(){
        clearInterval(this.state.request);
      }
        //获取url参数
  getQueryString (name){
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = location.href.substr(1).match(reg);
    if(r !== null){
      return  unescape(r[2]);
    }
    return null;
  }
   //分屏切换
   onclick(number) {
    let t = this;
    let splic = [...t.state.dustbins1].slice(0,number);
    if (number === 1 ){
      splic[0].padding='0 1vw 0 1vw',
      splic[0].marginTop='1vh',
      this.setState({
        dustbins: splic,
        height:'73vh',
        video:'70vh',
        num:24,
        color:'#3C97FF',
        color1:'#666',
        color2:'#666',
      })
    }
    if (number === 4 ){
      splic[0].padding='0 0.5vw 0 1vw',splic[0].marginTop='1vh',
      splic[1].padding='0 1vw 0 0.5vw',splic[1].marginTop='1vh',
      splic[2].padding='0 0.5vw 0 1vw',splic[2].marginTop='1.5vh',
      splic[3].padding='0 1vw 0 0.5vw',splic[3].marginTop='1.5vh',
      this.setState({
        dustbins: splic,
        num:12,
        height: '35.5vh',
        video:'33.5vh',
        color1:'#3C97FF',
        color:'#666',
        color2:'#666',
      })
    }
    if (number === 9){
      splic[0].padding='0 0.5vw 0 1vw',splic[0].marginTop='1vh',
      splic[1].padding='0 0.5vw 0 0.5vw',splic[1].marginTop='1vh',
      splic[2].padding='0 1vw 0 0.5vw',splic[2].marginTop='1vh',
      splic[3].padding='0 0.5vw 0 1vw',splic[3].marginTop='1.5vh',
      splic[4].padding='0 0.5vw 0 0.5vw',splic[4].marginTop='1.5vh',
      splic[5].padding='0 1vw 0 0.5vw',splic[5].marginTop='1.5vh',
      splic[6].padding='0 0.5vw 0 1vw',splic[6].marginTop='1.5vh',
      splic[7].padding='0 0.5vw 0 0.5vw',splic[7].marginTop='1.5vh',
      splic[8].padding='0 1vw 0 0.5vw',splic[8].marginTop='1.5vh',
      this.setState({
        dustbins: splic,
        num:8,
        height:'23vh',
        video:'20vh',
        color2:'#3C97FF',
        color:'#666',
        color1:'#666',
      })
    }
  }
    //鼠标松开事件
  /**
   *  参数(@index 容器的下标  @item 拖动的name  @box 携带播放所需的信息)
   **/
  handleDrop(index, item, box) {
    let t = this;
    /*
    * 此处t.setState执行两个参数，t.setState(update(this.state,{}),()=>{})
    * 第一个参数用于关闭播放器
    * 第二个参数用于开启播放器并更新播放的相关信息
    * update 扩展不变的数据（immutability-helper） 可参考github地址:https://github.com/kolodny/immutability-helper
    * {$set: any} 直接赋值覆盖
    * {$push: array} 数组中的push()语法
    * */
    t.setState(
      update(this.state, {
        dustbins: {
          [index]: {
            open:{
              $set: false,
            }
          },
        }
      }),
      ()=>{
        const { name } = item;
        let params = {};
        for (let i = 0;i <box.length;i++){
          box[i].sub.map(item => {
            if (item.name === name){
              params.cameraCode = item.url
            }
          })
        };
        request({
          url:'/jnhj/visCamera/getVideoUrlByCode',
          method:'GET',
          params
        }).then(data => {
          if (data.rc === 0){
            let playUrl = data.ret;
            const droppedBoxNames = name ? { $push: [name] } : {};
            this.setState(
              update(this.state, {
                dustbins: {
                  [index]: {
                    lastDroppedItem: {
                      $set: playUrl,
                    },
                    name:{
                      $set: name,
                    },
                    open:{
                      $set: true,
                    }
                  },
                },
                droppedBoxNames,
              }),
            )
          }else {
            message.error(data.err)
          }
        });
      }
    )
  }
  isDropped(boxName) {
    return this.state.droppedBoxNames.indexOf(boxName) > -1;
  }
  //查询
  onSearch(proId){
    let t = this;
    t.f1.getForm().validateFields((err, value) => {
      if (!err) {
        t.setState({
          loading: true,
        });
        request({
          method:'GET',
          url:'/jnhj/visCamera/getVisListByBindObjId',
          params:{
            projectCompanyId:proId ? proId.projectCompanyId : value.projectCompanyId,
          }
        }).then(data => {
          if (data.rc === 0){
            if (data.ret.length > 0){
              let boxes = [];
              let name = [];
              data.ret.map((item,index) => {
                let title = item.name;
                let sub = [];
                item.cameraList.map((items,index) => {
                  name.push(items.cameraName);
                  sub.push({name:items.cameraName,type:'true', url:items.cameraCode})
                });
                boxes.push({title,sub})
              });
              for (let i=0;i<1;i++){
                this.handleDrop(i, {name:name[i]}, boxes);
              }
              t.setState({
                boxes,
                loading: false,
                videoList:true
              })
            }else {
              t.setState({
                videoList:false
              })
            }

          }else {
            message.error(data.err)
          }
        })
      }
    })
  };
  onClose(index){
    let t = this;
    t.setState(
      update(this.state, {
        dustbins: {
          [index]: {
            open:{
              $set: false,
            },
            name:{
              $set: '',
            },
          },
        }
      })
    )
  }

    render() {
        let t = this;
        const { boxes, dustbins, color, color1, color2, options, videoList, projectCompanyId} = t.state;
        const items = [
          {
            type:'select',
            label:'项目选取',
            paramName: 'projectCompanyId',
            options: options,
            initialValue: projectCompanyId ? projectCompanyId: '',
            style:true,
          }
        ];

        return (
            <div>
              {/* <Filtrate items={items} ref={ref=>t.f1=ref} 
              submit={t.onSearch.bind(t)} 
              clearBtn={'hide'}/> */}
              <Row gutter={12} style={{  clear: 'both',height: '79.5vh' }}>
                <Col xs={20} sm={20} md={20} lg={20} xl={20}>
                  <div className={styles['wp-video']} style={{  clear: 'both' }}>
                    <Row style={{marginTop:'1vh'}}>
                      <Col span={2}>
                        <div className={styles.blueBlock}><i></i><span>实时监控</span></div>
                      </Col>
                      <Col span={22} style={{textAlign:'right',paddingRight:'1vw'}}>
                        <span
                         onClick={t.onclick.bind(t,1)} 
                         style={{color,cursor:'pointer'}}><MyIcon type="icon-icon-screen-one" style={{paddingRight: '0.4vw',color,fontSize:'0.8vw'}}/>一分屏</span>
                        <Divider type="vertical" />
                        <span 
                        onClick={t.onclick.bind(t,4)}
                         style={{color:color1,cursor:'pointer'}}><MyIcon type="icon-sifenping" style={{paddingRight: '0.4vw',color:color1,fontSize:'0.8vw'}}/>四分屏</span>
                        <Divider type="vertical" />
                        <span 
                        onClick={t.onclick.bind(t,9)} 
                        style={{color:color2,cursor:'pointer'}}><MyIcon type="icon-icon-screen-nine" style={{paddingRight: '0.4vw',color:color2,fontSize:'0.8vw'}}/>九分屏</span>
                      </Col>
                    </Row>
                    <Row >
                      {
                        dustbins.map(({ accepts, lastDroppedItem, name, padding, marginTop, open, controls, }, index) => (
                          <Col key={index} md={t.state.num} lg={t.state.num} xl={t.state.num}>
                            <Dustbin
                              key={index}
                              onClose={t.onClose.bind(t,index)}
                              load={t.state.load}
                              name={name}
                              padding={padding}
                              controls={controls}
                              open={open}
                              accepts={accepts}
                              lastDroppedItem={lastDroppedItem}
                              marginTop={marginTop}
                              width={t.state.width}
                              height={t.state.height}
                              video={t.state.video}
                              onDrop={item => this.handleDrop(index, item,t.state.boxes)}
                            />
                          </Col>
                        ))
                      }
                    </Row>
                  </div>
                </Col>
                <Col xs={4} sm={4} md={4} lg={4} xl={4}>
                  <div className={styles['wp-video']}>
                    <div className={styles.blueBlock} style={{paddingTop:'10px'}}><i></i><span>视频列表</span></div>
                    {
                      !videoList &&
                      <Row>
                        <div style={{height:'60vh', overflow:'auto',marginTop:'10px',lineHeight:'60vh',textAlign:'center'}}>
                          暂无视频
                        </div>
                      </Row>
                    }
                    {
                     videoList &&
                      <Row>
                        <div style={{height:'60vh', overflow:'auto',marginTop:'10px'}}>
                          <Collapse defaultActiveKey={['1']} bordered={false} accordion >
                            <Panel header="项目部" key="1" style={{border: 0,color:'#1A1A1A',fontSize:'14px',fontWeight:'bold',}}>
                              {
                                boxes[0].sub.map(({ name, type, url }, index) => (
                                  <Box
                                    key={index}
                                    name={name}
                                    type={type}
                                    isDropped={this.isDropped(type)}
                                  />
                                ))
                              }
                            </Panel>
                            <Panel header="项目现场" key="2" style={{border: 0,color:'#1A1A1A',fontSize:'14px',fontWeight:'bold',}}>
                              {
                                boxes[1].sub.map(({ name, type, url }, index) => (
                                  <Box
                                    key={index}
                                    name={name}
                                    type={type}
                                    isDropped={this.isDropped(type)}
                                  />
                                ))
                              }
                            </Panel>
                           
                          </Collapse>
                        </div>
                      </Row>
                    }
                  </div>
                </Col>
              </Row>
            </div>
          )
    }
}
function mapStateToProps (state) {
    return {
    };
  }
export default connect(mapStateToProps)(DragDropContext(HTML5Backend)(VideoDay));